<template>
  <n-layout-sider
    class="main_sider"
    bordered
    :show-trigger="true"
    trigger="right"
    collapse-mode="width"
    :collapsed-width="collapsedWidth"
    :width="width"
    :native-scrollbar="false"
  >
    <n-menu
      router
      :collapsed-width="collapsedWidth"
      :collapsed-icon-size="collapsedIconSize"
      :options="menuOptions"
      @update:value="handleMenuChange"
    />
  </n-layout-sider>
</template>

<script setup>
import { NLayoutSider, NMenu, NIcon } from 'naive-ui';
import { RouterLink } from 'vue-router';
import { ref, h } from 'vue';
import { AddOutline as AddIcon, WalletOutline as WalletIcon, AddCircleOutline as AddCircleIcon, MapOutline as MapIcon } from "@vicons/ionicons5";

// 定义props，接收父组件传递的属性
const props = defineProps({
  collapsedWidth: {
    type: Number,
    default: 64
  },
  width: {
    type: Number,
    default: 240
  },
  collapsedIconSize: {
    type: Number,
    default: 22
  }
});

// 渲染图标函数
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

// 菜单配置
const menuOptions = [
  {
    label: "系统管理",
    key: "system_admin",
    disabled: true,
    icon: renderIcon(AddIcon),
  },
  {
    label: "大屏监控",
    key: "full_display",
    icon: renderIcon(AddIcon),
    children: [
      { label: () => h(RouterLink, { to: { name: "AGV_position" } }, { default: () => "实时位置" }), key: "AGV_position", icon: renderIcon(MapIcon) },
      { label: () => h(RouterLink, { to: { name: "AGV_map" } }, { default: () => "AGV地图" }), key: "AGV_map", icon: renderIcon(MapIcon) },
    ],
  },
  {
    label: "参数设定",
    key: "setting",
    icon: renderIcon(AddIcon),
    children: [
      { label: () => h(RouterLink, { to: { name: "AGV_setting" } }, { default: () => "AGV参数" }), key: "AGV_setting", icon: renderIcon(AddIcon) },
      { label: () => h(RouterLink, { to: { name: "Station_setting" } }, { default: () => "站点参数" }), key: "Station_setting", icon: renderIcon(AddIcon) },
    ],
  },
  {
    label: "配置相关",
    key: "AGV_about",
    icon: renderIcon(AddIcon),
    children: [
      {
        type: "group",
        label: "AGV配置",
        key: "set1",
        children: [
          { label: () => h(RouterLink, { to: { name: "AGV_car_list" } }, { default: () => "AGV列表" }), key: "AGV_car_list", icon: renderIcon(WalletIcon) },
          {
            label: () => h(RouterLink, { to: { name: "AGV_simulation_list" } }, { default: () => "仿真列表" }),
            key: "AGV_simulation_list",
            icon: renderIcon(AddCircleIcon),
          },
          { label: () => h(RouterLink, { to: { name: "Station_list" } }, { default: () => "站点列表" }), key: "Station_list", icon: renderIcon(AddCircleIcon) },
          { label: () => h(RouterLink, { to: { name: "order_list" } }, { default: () => "订单列表" }), key: "order_list", icon: renderIcon(WalletIcon) },
          { label: () => h(RouterLink, { to: { name: "Edge_list" } }, { default: () => "路径列表" }), key: "Edge_list", icon: renderIcon(WalletIcon) },
        ],
      },
      {
        type: "group",
        label: "Task配置",
        key: "set2",
        children: [

          { label: () => h(RouterLink, { to: { name: "luosi" } }, { default: () => "分拣模拟" }), key: "luosi", icon: renderIcon(WalletIcon) },
          { label: () => h(RouterLink, { to: { name: "Task_list" } }, { default: () => "进程管理" }), key: "Task_list", icon: renderIcon(WalletIcon) },
        ],
      },
    ],
  },
];

// 菜单切换处理函数
function handleMenuChange(key, item) {
  // message.error("切换路太远");
  console.log(key);
  console.log(item);
}
</script>

<style scoped>
.main_sider {
  height: 100%;
  background-color: #fff;
}
</style>
